<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%;height: 100%;overflow-y: auto;">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="name" label="菜单名称" width="120"></el-table-column>
      <el-table-column prop="component" label="组件" width="200"></el-table-column>
      <el-table-column prop="path" label="路径" width="180"></el-table-column>
      <el-table-column prop="sort" label="顺序"></el-table-column>
      <el-table-column prop="icon" label="图标"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ value2Name(statusEnums, scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="permission" label="权限"></el-table-column>
      <el-table-column prop="nodeType" label="节点类型">
        <template slot-scope="scope">
          <span>{{ value2Name(nodeTypes, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="结束时间" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleAddOrUpdate(false,scope.row)" type="text">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal>0"
      :total="pageTotal"
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="queryPage"
    />

    <!--  添加或修改菜单配置对话框-->
    <el-dialog :title="isAdd?'新增菜单':'编辑菜单'" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-select v-model="form.status" placeholder="请选择" style="width:480px">
            <el-option v-for="t in statusEnums" :label="t.name" :value="t.value" :key="t.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单序号" prop="name">
          <el-input v-model="form.sort" placeholder="菜单序号"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {value2Name, parseTime} from "../../../utils";
import store from "../../../store";

export default {
  data() {
    return {
      // 编辑的窗口
      open: false,
      isAdd: false,
      form: {},

      // 查询参数
      pageTotal: 0,
      queryParam: {
        code: '',
        name: '',
        value: '',
        pageNum: 1,
        pageSize: 10
      },

      nodeTypes: store.listDictionary('menuNodeType'),
      statusEnums: store.listDictionary('isUse'),
      tableData: []
    }
  },
  mounted() {
    this.pageList()
  },
  methods: {
    parseTime,
    value2Name,
    queryPage() {
      this.pageList()
    },
    pageList() {
      var _this = this
      this.$api.menuPageList(_this.queryParam).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data.pageList
          _this.pageTotal = res.data.pageTotal
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },


    // 取消按钮
    cancel() {
      this.open = false
    },

    // 打开更新数据窗口
    handleAddOrUpdate(isAdd, row) {
      this.open = true
      this.isAdd = isAdd
      if (isAdd) {
        this.form = {}
      } else {
        this.form = row
      }
    },

    // 保存或者更新
    saveOrUpdate() {
      let _this = this
      let param = {
        name: _this.form.name,
        status: _this.form.status,
        sort: _this.form.sort,
      }
      if (this.isAdd) {
        this.$api.addMenu(param).then(res => {
          if (res.code === '00000') {
            _this.$message('新增成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      } else {
        param.id = _this.form.id
        this.$api.updateMenu(param).then(res => {
          if (res.code === '00000') {
            _this.$message('修改成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      }
    }
  }
}
</script>
